<template>
    <!-- 可滚动内容区域 -->
        <div class="scroll-wrapper" @scroll="rememberPos" ref="ArticleList">
          <!-- 新闻列表数据 -->
          <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh"
            :success-text="refreshSuccessText"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >

              <!-- 新闻item -->
              <van-cell v-for="(item,index) in list" :key="index" :to="`/article/${item.art_id.toString()}`">
                <div class="article_item">
                  <h3 class="van-ellipsis">
                    {{item.title}}
                  </h3>
                  <div class="img_box" v-if="item.cover.images.length">
                    <van-image
                      v-for="(img,index) in item.cover.images"
                      :key="index"
                      :class="item.cover.type === 1?'w100': 'w33'"
                      fit="cover"
                      :src="img"
                      lazy-load
                    />
                  </div>
                  <div class="info_box">
                    <span>{{item.aut_name}}</span>
                    <span>{{item.comm_count}}评论</span>
                    <span>{{item.pubdate | relTime}}</span>
                    <!-- 更多操作，叉号按钮 -->
                    <span v-if="$store.state.user.token" class="close" @click.stop="openMore(item.art_id.toString())"
                      ><van-icon name="cross"></van-icon
                    ></span>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
          <!-- / 新闻列表数据 -->

          <!-- 子组件弹框(更多操作) -->
          <MoreActive v-model="showMore" :articleId="articleId" @on-dislike="removeArticle"/>
          <!-- / 子组件弹框(更多操作) -->

        </div>
        <!-- /可滚动的区域 -->
</template>

<script>
// 在子组件导入获取新闻列表的方法
import { getArticleList } from '@/api/article'
// 引用子组件，显示弹层
import MoreActive from './components/more-action'
export default {
  // 在组件使用prop接收父组件传过来的id
  props: {
    // 父组件传递过来的频道id
    channelId: {
      type: Number
    }
  },
  // 注册子组件
  components: {
    MoreActive
  },
  data () {
    return {
      list: [], // 列表数据
      loading: false, // 加载状态
      finished: false, // 是否加载完成
      refreshing: false, // 是否在下拉状态
      refreshSuccessText: '', // 下拉刷新成功的文案
      timestamp: +new Date(), // 当前时间的时间戳
      scrollTop: '', // 列表滚动位置
      showMore: false, // 控制子组件是否显示
      articleId: '' // 点击更多操作给子组件传入的当前的文章id
    }
  },
  methods: {
    // 点击按钮实现弹出层显示，并且传入相应的文章ID
    openMore (articleID) {
      this.showMore = true
      // 向子组件传入id
      // console.log(articleID)
      this.articleId = articleID
    },
    // 上拉加载执行的函数(页面会默认执行的函数)
    async onLoad () {
      // 测试封装的公共插件
      // await this.$sleep()
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 调用接口发送ajax请求。传入当前的频道id以及当前的时间戳
      const { status, data } = await getArticleList(this.channelId, this.timestamp)
      // 判断当前状态值为200的时候代表获取数据成功
      if (status === 200) {
        // 追加列表数据
        this.list.push(...data.results)
        // console.log(data)
        // 加载状态结束
        this.loading = false
        // 在获取到数据之后，将下拉刷新的状态设置为false(刷新状态结束)
        if (this.refreshing) {
          this.refreshing = false
          this.refreshSuccessText = '刷新成功'
        }

        // 数据全部加载完成
        if (data.pre_timestamp) {
          // 如果为true表示下面还有数据，那么把当前data中需要给后端传递的时间戳改为当前后端返回的时间戳，作为下一次获取数据的新起点(时间戳)
          this.timestamp = data.pre_timestamp
        } else {
          // 如果data.pre_timestamp等于false表示没有时间啦，证明数据已经加载完毕
          this.finished = true
        }
      }
    },
    // 下拉刷新执行的函数
    onRefresh () {
      // 清空列表数据
      if (this.refreshing) {
        // console.log('开始下拉刷新')
        // 当下拉刷新方法触发的时候，清空新闻列表
        this.list = []
      }
      // 重新加载列表状态
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    // 记录列表滚动位置
    rememberPos (e) {
      // console.log(e.target.scrollTop)
      // 使用事件对象获取到当前滚到的位置
      this.scrollTop = e.target.scrollTop
    },
    // 滚动到记录的位置
    refScrollTop () {
      // $nextTick  代表当前切换过来之后，先渲染之后，在去执行这个函数，这样他就可以回到上次浏览滚动的位置
      this.$nextTick(() => {
        // 如果当前滚动的位置大于0之后，就把他赋值给当前滚动区域的滚动位置
        if (this.scrollTop > 0) {
          this.$refs.ArticleList.scrollTop = this.scrollTop
        }
      })
    },
    // 子组件注册自定义事件，调用父组件删除文章的方法，实现删除文章，页面刷新
    removeArticle () {
      // 获取要删除文章的索引,当前的数据数组中的id是否等于当前文章的id
      const index = this.list.findIndex((item) => item.art_id.toString() === this.articleId)
      // 删除当前文章的不感兴趣，使用数组方法
      this.list.splice(index, 1)
    }
  },
  created () {
    // 测试父组件传递的ID
    // console.log(this.channelId)
  },
  // 被缓存的组件会再次被触发
  activated () {
    // console.log('组件再次被触发')
    // 缓存阅读记忆   当再次回到被缓存的组件的时候，调用一开始这个组件滚动的位置的函数
    this.refScrollTop()
  }
}
</script>

<style lang="less" scoped>
// 新闻的内容的样式
.article_item{
  h3{
    font-weight: normal;
    line-height: 2;
  }
  .img_box{
    display: flex;
    justify-content: space-between;
    .w33{
      width: 33%;
      height: 90px;
    }
    .w100{
      width: 100%;
      height: 180px;
    }
  }
  .info_box{
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span{
      padding-right: 10px;
      &.close{
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
